<template>
	<view class="uni_box home">
		<navbar :title='info.title?info.title:"任务详情"'>
			<view class="rvalshare" slot="right" @click="postershow=true">
				<image class="fenxiang" src="/static/img/fenxiang.png" mode="" />
			</view>
		</navbar>
		<view class="content" :style="{ background: rencolor }">
			<view class="renone">
				<view class="renitem">
					<text class="sname">剩余链接</text>
					<text class="snum">{{ info.count }}</text>
				</view>
				<view class="shuxian"></view>
				<view class="renitem" @click="getbaoming">
					<text class="sname">我的推广码</text>
					<text class="snum">{{ info.my_nums }}</text>
				</view>
			</view>
			<view class="rentwo">
				<view class="renhead">
					<image class="icon_sc" src="/static/img/icon_sc.png" mode="" />
					<text class="yname">佣金政策</text>
				</view>
				<view class="detail-card">
					<!-- <view class="tabview">
						<view class="one_header_tab">
							{{info.title}}
						</view>
						<table class="table" width="100%">
							<tr class="tr header_tab">
								<td class="th" :class="ind==0?'oneth':'twoth'" :colspan="ind==0?'2':'1'" v-for="(i, ind) in info.yj_data" :key="ind">{{i.title}}</td>
							</tr>
							<tr class="tr" >
								<td class="th"  :colspan="ind==0?'2':'1'" v-for="(i, ind) in info.yj_data" :key="ind">{{i.value}}</td>
							</tr>
						</table>

					</view> -->
					<view class="tabview">
						<!-- <view class="one_header_tab">
						0000
						</view> -->
						<table class="table" width="100%">
							<tr class="tr header_tab" style="    background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);">
							<td class="th twoth">任务</td>
							<td class="th twoth">单价</td>
							<td class="th twoth">平台补贴</td>
							<td class="th twoth">结算周期</td>
							</tr>
							<tr class="tr" style="border-radius: 10rpx;" v-for="(item,index) in info.policy" :key="index">
							<td class="th">{{item.alias}}</td>
							<td class="th"><text>{{item.price}}</text></td>
							<td class="th">{{item.butie}}</td>
							<td class="th">{{item.cycle}}</td>
							</tr>
						</table>
						
						</view>

				</view>
				<view class="renhead" v-if="info.policy_remark&&iszhan">
					<image class="icon_sc" src="/static/img/icon_sc.png" mode="" />
					<text class="yname">温馨提示</text>
				</view>
				<view v-if="info.policy_remark&&iszhan">
					<u-parse :html="info.policy_remark"></u-parse>
				</view>
				<view>
				<view class="boticon">
					<u-icon class="xiala floatingBox" name="arrow-right-double" color="rgba(29, 141, 253, 1)" size="43" style="transform: rotate(-90deg);" v-if="iszhan" @click="getzhan"></u-icon>
					<u-icon class="xiala floatingBox" name="arrow-right-double" color="rgba(29, 141, 253, 1)" size="43" style="transform: rotate(90deg);" v-if="!iszhan" @click="getzhan"></u-icon>
				</view>
				</view>
				<!-- <view v-if="infostyle==2">
				<view class="boticon" v-if="taskDetail.policy.length>numlengthtwo||isremark">
					<u-icon class="xiala floatingBox" name="arrow-right-double" :color="infocolor.btn_color" size="43" style="transform: rotate(-90deg);" v-if="iszhan" @click="getzhan"></u-icon>
					<u-icon class="xiala floatingBox" name="arrow-right-double" :color="infocolor.btn_color" size="43" style="transform: rotate(90deg);" v-if="!iszhan" @click="getzhan"></u-icon>
				</view>
				</view> -->
			</view>
			<view class="rentwo"  v-if="info.spins">
				<view class="renhead" >
					<image class="icon_sc" src="/static/img/icon_sc.png" mode="" />
					<text class="yname">特别说明</text>
				</view>
				<view class="rendetail" v-if="info.spins">
					<u-parse :html="info.spins"></u-parse>
				</view>
				<!-- <view class="tuitem" v-for="(item,index) in info.step_json" v-if="info.step_json" :key="index">
					<text class="tutit" v-if="item.name">{{item.name}}</text>
					<image class="tuitemimg" v-if="item.value" :src="item.value" mode="widthFix" @click.stop="previewImage(item.value)"  />
				</view> -->
				

			</view>
			<view class="rentwo"  v-if="info.course">
				<view class="renhead" >
					<image class="icon_sc" src="/static/img/icon_sc.png" mode="" />
					<text class="yname">推广教程</text>
				</view>
				<view class="rendetail" v-if="info.course">
					<u-parse :html="info.course"></u-parse>
				</view>
				<!-- <view class="tuitem" v-for="(item,index) in info.step_json" v-if="info.step_json" :key="index">
					<text class="tutit" v-if="item.name">{{item.name}}</text>
					<image class="tuitemimg" v-if="item.value" :src="item.value" mode="widthFix" @click.stop="previewImage(item.value)"  />
				</view> -->
				

			</view>
		</view>
		<view class="botview">
			<view class="tishi" v-if="info.end_min_cha">
				<text class="jzhi">任务截止提交时间：</text>
				<u-count-down :timestamp="info.end_min_cha" color="#1989F9" @end="shenqing" separator-color="#1989F9"></u-count-down>
			</view>
			<view class="lianxi" :style="{
				background: configinfo.zhu_color
			}" @click="shenqing">
				提交
			</view>
		</view>

		<!-- 分享 -->
		<MTSharePoster :postershow="postershow" @postercancel="postershow = false" type="task" :leitype="leitype" :posterinfo="info">
		</MTSharePoster>
</view>
</template>

<script>
import MTSharePoster from '@/components/MTSharePoster';
export default {
	components: {
		// "MTSharePassword": MTSharePassword,
		"MTSharePoster": MTSharePoster
	},
	data() {
		return {
			rencolor: '#68B6EC',
			zhucolor: uni.getStorageSync('zhu_color'),
			infostyle:1,
			iszhan:false,
			taskDetail:{
				policy_remark:'测试测试'
			},
			id:'',
			leitype:'1',
			info:{},
			configinfo:uni.getStorageSync('configinfo'),
			yj_data:[
				{danjia:1,butie:1,zhouqi:1},
				{danjia:1,butie:1,zhouqi:1},
				{danjia:1,butie:1,zhouqi:1},
			],
			postershow: false,
			posterinfo:{}
		}
	},
	onLoad(option) {
		this.id = option.id
		if(option.leitype){
			this.leitype = option.leitype // 1首页
		}
		
		this.getDetail()
		// console.log(this.configinfo)
	},
	onShow() {
	},
	methods: {
		async getDetail(){
			let res = await this.$u.api.homelistsdetail({
				id:this.id
			});
			this.info = res
			
			
		},
		shenqing(){
			this.navrouter("/pages_subject/twoPage/ShenqingHome?id="+this.info.id+'&leitype='+this.leitype);
		},
		getzhan(){
			this.iszhan = !this.iszhan
		},
		previewImage(item){
			// console.log('index', index)
			let a= []
			// let list = this.list
			a.push(item)
			uni.previewImage({
				current: item, //预览图片的下标
				urls: a//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
			})
		},
		getbaoming(){
			this.navrouter("/pages_subject/twoPage/MyBaomingHome?id="+this.id+'&leitype='+this.leitype);
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

.content {
	background-color: #fff;
	padding-bottom: 150rpx;
	min-height: 100vh;

	.renone {
		display: flex;
		flex-direction: row;
		position: relative;
		padding: 30rpx;
		align-items: center;

		.renitem {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.sname {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.snum {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.shuxian {
			width: 1rpx;
			height: 40rpx;
			background: #FFFFFF;
			opacity: 0.5;
		}
	}

	.rentwo {
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 30rpx 30rpx;

		.renhead {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 20rpx;

			.icon_sc {
				margin-right: 6rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.yname {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
}

.botview {
	height: 120rpx;
	background: #FFFFFF;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	border-top: 1rpx solid #eee;
	padding: 30rpx;
	.tishi{
		display: flex;
		flex-direction: column;
		margin-right: 40rpx;
		.jzhi{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #1989F9;
			display: block;
			margin-bottom: 8rpx;
		}
		/deep/.u-countdown{
			font-weight: 500;
		}
	}

	.botleft {
		width: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.icon_fenxiang {
			width: 44rpx;
			height: 44rpx;

		}

		text {
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.lianxi {
		margin-left: auto;
		// width: 100%;
		flex: 1;
		height: 88rpx;
		background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

.table {
  	width: 100%;
  	border-radius: 10rpx;
  	display: table;
  	border: 0.5px solid #CCC;
  	border-collapse: collapse;
  	margin-bottom: 0rpx;
  }
  
  .th {
  	text-align: center;
  	color: #FFFFFF;
  	padding: 15rpx 3px;
  	font-weight: bolder;
  	display: table-cell;
  	// background: #FFFFFF;
  	font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  	border: 0.5px solid #e4e4ee;
		width: 25%;
  }
  
  .td {
  	text-align: center;
  	background: #FFFFFF;
  	padding: 20rpx 5rpx;
  	display: table-cell;
  	border: 1px solid #e4e4ee;
  	font-size: 24rpx;
  	font-family: PingFang SC;
  	font-weight: 400;
  	color: #333;
  }
  
  .tdinput {
  	width: 120rpx;
  }
  .tabview{
    width: 100%;
  }
  .detail-card{
	margin-bottom: 40rpx;
  }
  .one_header_tab{
    width: 100%;
    background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
    border-radius:20rpx 20rpx 0 0;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(51, 51, 51, 1);
    font-size: 26rpx;
    font-weight: 500;
  }
  .header_tab{
	background-color: #eee;
	
	.th{
		padding: 10px 0;
		font-weight: 500;
	}
  }
  .oneth{
    width: 50%;
  }
  .twoth{
    width: 25%;
  }
  .floatingBox{
	position:relative; /*设置元素脱离文档流*/
	animation: floatUpDown 2.5s ease-in-out infinite; /*设置动画，循环播放*/
	}

	/*动画部分，使用关键词@keyframes来定义动画*/
	@keyframes floatUpDown{
	0%{
		top:0; /*在起始状态时让元素位于顶部*/
	}
	50%{
		top:10px; /*在50%时让元素向下浮动20像素*/
	}
	100%{
		top:0; /*在结束状态时让元素回到原来位置*/
	}
	}
  .xiala{
    margin: 30rpx auto 30rpx;
    width: 36rpx;
    height: 32rpx;
  }
  .boticon{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .shengview{
    margin: 0px 15px 5px;
    position: relative;
    .shouyibg{
      width: 100%;
    }
    .shengitem{
      position: absolute;
      display: flex;
      flex-direction: row;
      align-items: center;
      // height: 100%;
      color: #fff;
      font-weight: 500;
      font-size: 30rpx;
      z-index: 2;
      width: 100%;
      top: 23%;
      text{
        margin-left: 15%;
        display: inline-block;
      }
    }
  }
  .tuitem{
	display: flex;
	flex-direction: column;
	margin-bottom: 20rpx;
	margin-top: 30rpx;
	.tutit{
		display: block;
		color: #333;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
	.tuitemimg{
		width: 100%;
	}
  }
  

.zhanwei {
	height: 20rpx;
	width: 100%;
	background-color: #f6f6f6;
}
.rvalshare{
	position: absolute;
	right: 30rpx;
	font-size: 28rpx;
	margin-top: 14rpx;
	// #ifdef APP-PLUS
	margin-top: 4rpx;
	// #endif
	
	.fenxiang{
		width: 46rpx;
		height: 46rpx;
	}
}
</style>
